<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
        <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap-clearmin.min.css}">
        <link rel="stylesheet" type="text/css" th:href="@{/css/roboto.css}">
        <link rel="stylesheet" type="text/css" th:href="@{/css/material-design.css}">
        <link rel="stylesheet" type="text/css" th:href="@{/css/small-n-flat.css}">
        <link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}">
        <title>Clearmin template</title>
    </head>
    <body class="cm-no-transition cm-2-navbar">
        <!-- 菜单 -->
        <div th:replace="common/menu :: menu"></div>
        <header th:replace="common/header :: header"></header>
        <div id="global">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">角色列表</div>
                            <div class="modal-header">
                                <form class="form-horizontal">
                                    <div class="form-group" id="queryCriteria">
                                        <label class="col-sm-1 control-label">角色名称</label>
                                        <div class="col-sm-2">
                                            <input type="text" class="form-control" name="name">
                                        </div>

                                        <label class="col-sm-1 control-label">代号</label>
                                        <div class="col-sm-1">
                                            <input type="text" class="form-control" name="code">
                                        </div>
                                        <div class="col-sm-1"></div>
                                        <div class="col-sm-2">
                                            <button type="button" onclick="search()" class="btn btn-primary">查询</button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                            <div class="panel-body">
                                <table id="roleListTable" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>角色名称</th>
                                            <th>代号</th>
                                            <th>创建时间</th>
                                            <th>更新时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" onclick="addRole()" class="btn btn-primary">创建角色</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 更新对话框 -->
            <div th:replace="role/roleDialog :: updateDialog"></div>
            <footer th:replace="common/footer :: footer"></footer>
        </div>
        <script th:src="@{/js/lib/jquery-2.1.3.min.js}"></script>
        <script th:src="@{/js/jquery.mousewheel.min.js}"></script>
        <script th:src="@{/js/jquery.cookie.min.js}"></script>
        <script th:src="@{/js/fastclick.min.js}"></script>
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <script th:src="@{/js/clearmin.min.js}"></script>

        <script>
            $(function(){
                // 第一次加载角色
                search();

                $("#confirmEdit").click(function () {
                    var editType =  $("#editType").val();
                    var url = "";
                    if ("add" == editType) {
                        url = "/role/add";
                    } else {
                        url = "/role/update";
                    }
                    var rid = $("#roleDialog #rid").val();
                    var name = $("#roleDialog #name").val();
                    var code = $("#roleDialog #code").val();
                    $.ajax({
                        type: "POST",
                        url: url,
                        dataType: "json",
                        data: {
                            "rid": rid,
                            "name": name,
                            "code": code
                        },
                        success: function(data){
                            $('#roleDialog').modal('hide');

                            search();
                        },
                        error: function () {
                            alert("修改失败");
                        }
                    });
                });
            });

            /**
             * 获取角色详情
             */
            function search() {
                var conditions = new Array();

                var nameConditionMap = new Object();
                var name = $("#queryCriteria input[name='name']").val();
                if (null != name && "" != name) {
                    nameConditionMap['fieldName'] = "name";
                    nameConditionMap['operate'] = "eq";
                    nameConditionMap['value'] = name;
                    conditions.push(nameConditionMap);
                }

                var codeConditionMap = new Object();
                var code = $("#queryCriteria input[name='code']").val();
                console.log('code = ' + code);
                if (null != code && "" != code) {
                    codeConditionMap['fieldName'] = "code";
                    codeConditionMap['operate'] = "eq";
                    codeConditionMap['value'] = code;
                    conditions.push(codeConditionMap);
                }

                var data = new Object();
                if (conditions.length > 0) {
                    var json = JSON.stringify(conditions);
                    data['conditionJson'] = json;
                }

                console.log(json);
                $.ajax({
                    type: "POST",
                    url: "/role/list",
                    dataType: "html",
                    data: data,
                    success: function(data){
                        console.log(data);
                        var html = $(data).find("tbody:eq(0)").html();
                        $("#roleListTable tbody").html(html);
                    },
                    error: function () {
                        alert("角色数据获取失败");
                    }
                });
            }
            /**
             * 添加角色按钮点击
             */
            function addRole() {
                $("#editType").val("add");
                $('#roleDialog').modal();
            }
            /**
             * 更新角色按钮点击
             */
            function updateRole(rid) {
                $("#editType").val("update");

                $.ajax({
                    type: "GET",
                    url: "/role/get",
                    dataType: "json",
                    data: {
                        "rid": rid
                    },
                    success: function(data){
                        console.log(data);
                        $("#roleDialog #rid").val(data['rid']);
                        $("#roleDialog #name").val(data['name']);
                        $("#roleDialog #code").val(data['code']);

                        $('#roleDialog').modal();
                    },
                    error: function () {
                        alert("角色数据获取失败");
                    }
                });
            }

            /**
             * 删除角色按钮点击
             */
            function deleteRole(rid) {
                $.ajax({
                    type: "GET",
                    url: "/role/del",
                    dataType: "json",
                    data: {
                        "rid": rid
                    },
                    success: function(data){
                        console.log(data);
                        search();
                    },
                    error: function () {
                        alert("角色删除失败");
                    }
                });
            }
        </script>
    </body>
</html>